iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
SideProject30

想要學 50 音!系列 第 24

[DAY - 24] 撐住!失敗為成功之母!倒數最後7天!認真寫完它吧!

  • 分享至 

  • xImage
  •  

GitHub

我要學50音

  • 實作後的成果
  • 隨著每天的更新都會變化唷唷~~

DAY 24

import {
  Box,
  Button,
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";
import { DataGrid } from "@mui/x-data-grid";
import React, { useEffect, useState } from "react";
import { hiraganaList } from "../../shared/model/aiueoObj";
import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";

//
// IMPORT ZONE
//

function Day222324() {
  const [isPaused, setIsPaused] = useState(false);
  const [voice, setVoice] = useState(null);

  useEffect(() => {
    const synth = window.speechSynthesis;
    const voices = synth.getVoices();
    const jpVoice = voices.filter((d) => d.lang === "ja-JP");
    if (jpVoice.lenth !== 0) {
      setVoice(jpVoice[0]);
    } else {
      setVoice(voices[0]);
    }
  }, []);

  const handlePlay = (words) => {
    const synth = window.speechSynthesis;

    if (isPaused) {
      synth.resume();
    } else {
      const u = new SpeechSynthesisUtterance(words);
      console.log("u", u);
      u.voice = voice;
      synth.speak(u);
    }
    setIsPaused(false);
  };

  const handleVocieOnChange = (v) => {
    setVoice(v.target.value);
  };

  const hiraganaListRow = [...hiraganaList].map((d, idx) =>
    Object.assign(d, { id: idx })
  );

  const columns = [
    {
      field: "name",
      headerName: "行",
      width: 100,
      align: "center",
      headerAlign: "center",
    },
    {
      field: "あ",
      headerName: "あ段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            <div>{row.value}</div>
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "い",
      headerName: "い段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            <div>{row.value}</div>
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "う",
      headerName: "う段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            <div>{row.value}</div>
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "え",
      headerName: "え段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            <div>{row.value}</div>
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "お",
      headerName: "お段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            <div>{row.value}</div>
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "ん",
      headerName: "ん段",
      width: 100,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        if (!row.formattedValue) return null;
        return (
          <>
            {row.formattedValue.toString()}
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(row.formattedValue)}
            />
          </>
        );
      },
    },
    {
      field: "words",
      headerName: "念起來",
      width: 150,
      align: "center",
      headerAlign: "center",
      renderCell: (row) => {
        const text = row.formattedValue.toString();
        return (
          <>
            {/* {row.value} */}
            {/* <TextField
                onChange={(e) => {
                
                }}
              /> */}
            <Button
              startIcon={<RecordVoiceOverIcon />}
              color="primary"
              onClick={() => handlePlay(text)}
            />
          </>
        );
      },
    },
  ];

  return (
    <Grid
      container
      spacing={{ mobile: 1, tablet: 2, laptop: 3 }}
      style={{ textAlign: "center" }}
    >
      <Grid item xs={12}>
        <h1>Day 22 23 24 再複習一下 50 音</h1>
      </Grid>
      <Grid item xs={2} justifyItems="center">
        選擇語系
      </Grid>
      <Grid item xs={10}>
        <FormControl fullWidth>
          <InputLabel> 選擇說話語音</InputLabel>
          <Select
            value={voice?.name}
            label="選擇說話語音"
            onChange={(v) => handleVocieOnChange(v)}
          >
            {window.speechSynthesis.getVoices().map((voice) => (
              <MenuItem key={voice.name} value={voice}>
                {voice.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Grid>
      <Grid container alignContent="center" justifyContent={"center"}>
        <Grid item>
          <Box>
            <Grid item>
              <DataGrid
                style={{ fontSize: "32px" }}
                columns={columns}
                rows={hiraganaListRow}
              />
            </Grid>
          </Box>
        </Grid>
      </Grid>
    </Grid>
  );
}

export default Day222324;

Reference


上一篇
[DAY-23] 棒球輸了心好痛 TAT!!!!!
下一篇
[DAY-25] 今天想要耍廢
系列文
想要學 50 音!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言